<template>
    <div class="center-nav">
        <i class="user-avatar"> <img src="@/assets/images/center-avatar.png"></i>
        <p>{{userName}}</p>
        <ul>
            <li :class="{'active':isCenterIndex==0}">
                <router-link to="">
                    <i><img src="@/assets/images/icon-advisory.png"></i>
                    <i><img src="@/assets/images/icon-advisory-active.png"></i>
                    <span>咨询记录</span>
                </router-link>
            </li>
            <li :class="{'active':isCenterIndex==1}">
                <router-link to="">
                    <i><img src="@/assets/images/icon-complaint.png"></i>
                    <i><img src="@/assets/images/icon-complaint-active.png"></i>
                    <span>投诉记录</span>
                </router-link>
            </li>
            <li :class="{'active':isCenterIndex==2}">
                <router-link to="">
                    <i><img src="@/assets/images/icon-help.png"></i>
                    <i><img src="@/assets/images/icon-help-active.png"></i>
                    <span>求助记录</span>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                userName:'pear5212',
            }
        },
        props:{
            isCenterIndex:Number
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/basis";
    .center-nav{
        width:187px;
        padding-top: 30px ;
        background:rgba(255,255,255,1);
        .user-avatar{
            display: block;
            width: 65px;
            margin: 0 auto;

        }
        p{
            margin: 24px 0 36px;
            text-align: center;
            font-size: 16px;
        }
        ul{
            li{
                a{
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width:100%;
                    height:45px;
                    color: #999;
                    /*background:rgba(229,184,127,1);*/
                    /*opacity:0.1;*/
                    i{
                        img{
                            width: 20px;
                        }
                        &:nth-child(2){
                            display: none;
                        }
                    }
                    span{
                        margin-left: 6px;
                    }
                }
                &.active{
                    a{
                        background:rgba(229,184,127,.1);
                        color: $colorEarth;
                        i{
                            display: none;
                            &:nth-child(2){
                                display: block;
                            }
                        }
                        &:before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 0;
                            height: 100%;
                            width: 2px;
                            background-color: $colorEarth;
                        }
                    }
                }
                &:hover{
                   a{
                       color: $colorEarth;
                       i{
                           display: none;
                           &:nth-child(2){
                               display: block;
                           }
                       }
                   }
                }
            }
        }
    }
</style>
